<template>
  <section class="person-in-out">
    <DivShell title="居民迁入迁出情况">
      <div class="container">
        <div class="person-line-echart" id="person-line-echart"></div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
const echarts = require('echarts');
export default {
  name: "PersonInOut",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      lineChartObj:null,
      xData:[],
      yPersonIn:[],
      yPersonOut:[]
    };
  },
  computed: {
    ...mapGetters(['reBuildData']),
  },
  watch:{
    reBuildData: {
      handler(cval, oval) {
        this.filterData();
        this.renderLineEcharts();
      },
      deep: true
    }
  },
  created(){
    this.filterData();
  },
  mounted() {
    this.lineChartObj = echarts.init(document.getElementById('person-line-echart'));
    this.renderLineEcharts();
    window.addEventListener("resize", () => { this.lineChartObj.resize();});
  },
  methods: {
    filterData(){
      this.xData=[];
      this.yPersonIn=[];
      this.yPersonOut=[];
      this.reBuildData.moveInList.forEach(el => {
        this.xData.push(el.label+'月');
        this.yPersonIn.push(el.value);
      });
      this.reBuildData.moveOutList.forEach(el => {
        this.yPersonOut.push(el.value);
      });
    },
    renderLineEcharts(unit){
      var option={
          animation: false,
          grid: {
              left: ''+Math.round(30*this.desgin1pxToCilent),
              right: ''+Math.round(35*this.desgin1pxToCilent),
              bottom: ''+Math.round(45*this.desgin1pxToCilent),
              top:''+Math.round(20*this.desgin1pxToCilent),
          },
          legend: {
            data: ['迁入', '迁出'],
            bottom:-Math.round(6*this.desgin1pxToCilent),
            itemHeight:Math.round(8*this.desgin1pxToCilent),
            textStyle:{
              color:'#B3BBD4'
            } 
          },
          color:['#307FFF','#4AEBE2'],
          tooltip: {
            show:false,
            trigger: 'axis',
          },
          xAxis: {
              type: 'category',
              data: this.xData,
              boundaryGap: false,
              name:'',
              nameTextStyle:{
                color:'#626C8A',
              },
              axisLabel:{
                color:'#626C8A',
              },
              axisTick:{
                show:false
              },
              splitLine:{
                show:false
              },
              axisLine:{
                lineStyle:{
                  color:'#39486C',
                  type:'solid',
                  opacity:1
                }
              },
          },
          yAxis: {
              type: 'value',
              name:'',
              // minInterval:1,
              nameTextStyle:{
                color:'#626C8A',
              },
              axisLabel:{
                color:'#626C8A',
              },
              axisTick:{
                show:false
              },
              splitLine:{
                lineStyle:{
                  color:'#4D5470',
                  type:'dotted',
                  opacity:0.8
                }
              },
              axisLine:{
                // show:false
                lineStyle:{
                  color:'#39486C',
                  type:'solid',
                  opacity:1
                }
              }
          },
          series: [
            {
              name: '迁入',
              type: 'line',
              symbolSize:Math.round(6*this.desgin1pxToCilent),
              // symbol: 'none',
              smooth:false,
              data: this.yPersonIn,
              label: {
                  show: true,
                  position: 'top',
                  color:'#9CA7C7',
                  fontSize:'14px'
              },
              lineStyle:{
                width:2*this.desgin1pxToCilent,
                color:'#307FFF'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(48,127,255,0.5)'
                  }, {
                      offset: 1,
                      color: 'rgba(255,255,255,0.05)'
                  }])
              },
            },
            {
              name: '迁出',
              type: 'line',
              // symbol: 'none',
              symbolSize:Math.round(6*this.desgin1pxToCilent),
              smooth:false,
              data: this.yPersonOut,
              label: {
                  show: true,
                  position: 'bottom',
                  color:'#9CA7C7',
                  fontSize:Math.round(14*this.desgin1pxToCilent)+'px',
              },
              lineStyle:{
                width:Math.round(2*this.desgin1pxToCilent),
                color:'#4AEBE2'
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(74,235,226,0.5)'
                  }, {
                      offset: 1,
                      color: 'rgba(255,255,255,0.05)'
                  }])
              },
            },
          ]
        }
      this.lineChartObj.setOption(option,true);
    },
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .person-in-out{
    // margin-bottom: 18px;
    & .container{
      &>.person-line-echart{
        height: 200px;
        margin-top: -20px;
      }
    }
  }
</style>
